<template>
  <div class="info">
    <div class="headimg">
      <div class="left">头像：</div>
      <div class="right">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          
          :before-upload="uploadFile">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
    <div class="item">
      <div class="left">昵称：</div>
      <div class="right">
        <input class="input" type="text" name="" v-model="form.name">
      </div>
    </div>
    <div class="item">
      <div class="left">性别：</div>
      <div class="right">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="item">
      <div class="left">手机号码：</div>
      <div class="right">
        <input class="input" type="text" name="" v-model="form.phone">
      </div>
    </div> 
    <div class="item">
      <div class="left">居住地址：</div>
      <div class="right">
        <input class="input" type="text" name="" v-model="form.address">
      </div>
    </div>  
    <div class="tj" @click="upinfo()">
      提交
    </div> 
      
    
  </div>
</template>

<script>
import qs from "qs"
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
      comimgsrc:'http://api.mountainfreshes.com',
      form: {
        name: '',
        sex: '',
        phone: '',
        address: '',
        
      },
      imageUrl: '',
      headimg: ''
    }
  },
  methods:{
    uploadFile(file){
                 var formData=new FormData();
                 formData.append('file',file);
                 var file = formData;
            this.$http.post("/index.php/index/ajax/upload",file).then((res)=>{
                     console.log(res)
                     this.imageUrl = this.comimgsrc+res.data
                     this.headimg = res.data
                     // this.imageUrl = URL.createObjectURL(file.raw);
                 })
                return false;
            },
    onSubmit:function(){
      console.log(this.form)
    },
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.headimg = res
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      getinfo:function(){
        this.$http.post("/index.php/user/user/index",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid
              }))
              .then(res => {
                console.log(res)
                this.form.name = res.data.row.username
                if(res.data.row.sex==0){
                  this.form.sex = '男'
                }else if(res.data.row.sex==1){
                  this.form.sex = '女'
                }else{
                  this.form.sex = ''
                }
                this.form.phone = res.data.row.mobile
                this.form.address = res.data.row.address
                this.image = res.data.row.headimg
                if(res.data.row.headimg == null){
                  this.imageUrl = this.image
                }else{
                  this.imageUrl = this.comimgsrc + this.image
                }
                this.headimg = res.data.row.headimg
              })
              .catch(error => {
                alert("网络错误")
              });
      },
      upinfo:function(){
        let aa = ''
        if(this.form.sex == '男'){
          aa = 0
        }else if(this.form.sex == '女'){
          aa = 1
        }else{
          aa = ''
        }
        this.$http.post("/index.php/user/user/userdata",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  user_id: this.$store.state.userid,
                  sex: aa,
                  username: this.form.name,
                  headimg: this.headimg,
                  address: this.form.address
              }))
              .then(res => {
                this.$toast({
                  message: '添加成功',
                  iconClass: 'icon iconfont icon-chenggong'
                });
                localStorage.headimg = this.headimg
                this.$store.state.headimg = this.headimg
              })
              .catch(error => {
                alert("网络错误")
              });
      }
  },
  components:{
    
  },
  created(){
    this.getinfo();
  },
  watch:{
    '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                
                if(to.path == '/basicinfo'){
                  this.getinfo();
                }
              }
  }
}
</script>



<style scoped lang="less">
.tj{
  width: 100%;
  height: .8rem;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  background: #54b84c; 
  color: #fff;
  line-height: .8rem;
  font-size: .24rem;
}
.info{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  padding-top: 20px;
}
.headimg{
  padding: 0 .2rem;
  height: 1.4rem;
  border-top: .1rem solid #eceef3;
  border-bottom: .1rem solid #eceef3;
  .left{
    float: left;
    width: 1.5rem;
    height: 100%;
    line-height: 1.4rem;
    font-size: .24rem;
    color: #333;
    text-align: left;
  }
  .right{
    width: 4.3rem;
    float: right;
    height: 100%;
    float: right;
    .avatar-uploader{
      float: right;
      width: 1.1rem;
      height: 1.1rem;
      margin-top: .15rem;
      .el-upload {
        border-radius: 100%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background: #d6d6d6 !important;
        width: 1.1rem !important;
        height: 1.1rem !important;
          i{
            display: block;
            font-size: .3rem;
            line-height: 1.1rem;
            text-align: center;
          }
        }
        img{
          display: block;
          width: 1.1rem;
          height: 1.1rem;
          border-radius: 100%;
        }
    }
  }
}
.item{
  padding: 0 .2rem;
  height: .72rem;
  border-bottom: .02rem solid #dcdcdc;
  .left{
    float: left;
    width: 1.5rem;
    height: 100%;
    line-height: .72rem;
    font-size: .24rem;
    color: #333;
    text-align: left;
  }
  .right{
    width: 4.3rem;
    float: right;
    height: 100%;
    float: right;
    text-align: right;
    line-height: .72rem;
    .input{
      border: none;
      height: 100%;
      width: 100%;
      display: block;
      text-align: right;
      font-size: .24rem;
      box-sizing: border-box;
      outline: none;
    }
  }
}
</style>
